<template>
  <div class="pg-shaohuo-person-list"
    layout="column">

    <!-- 页面搜索组件
    -------------------------- -->
    <comp-page-search
      :metaList="searchConfig"
      @searchCondChange="searchCondChange"
      module="PgShaohuoPersonList"></comp-page-search>

    <!-- 功能按钮区
    -------------------------- -->
    <div class="gl-page-btns">
      <el-button type="success" size="mini"
        @click.native="showDialogByToggle = !showDialogByToggle">添加捎货人</el-button>
      
      <!-- 设置用户类型popover
      -------------------------- -->
      <el-popover
        class="pg-shaohuo-person-list__popover"
        @hide="applyPopover = false"
        placement="bottom"
        title="选择审核状态"
        width="200"
        :disabled="!selectList.length || applyPopover"
        trigger="click">
        <el-select v-model="apply"
          @change="applyChange"
          placeholder="请选择">
          <el-option
            v-for="item in applyList"
            :key="item.value"
            :label="item.name"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button @click.native="applySelected('uid')"
          type="primary" size="mini"
          slot="reference"
          :loading="loadingBtn === '审核' && loadingRow === null">审核</el-button>
      </el-popover>
      <el-button @click.native="statusSelected('uid', '1')"
        type="primary" size="mini"
        :loading="loadingBtn === '恢复' && loadingRow === null">恢复</el-button>
      <el-button @click.native="statusSelected('uid', '0')"
        type="primary" size="mini"
        :loading="loadingBtn === '禁用' && loadingRow === null">禁用</el-button>
      <el-button @click.native="exportCurrent()"
        type="primary" size="mini"
        :loading="loadingBtn === '导出数据' && loadingRow === null">导出数据</el-button>
      <iframe width="0" height="0" frameborder="0" name="exportIframe" style="display: none"></iframe>
    </div>

    <!-- 数据表格
    -------------------------- -->
    <comp-page-table
      :tableConfig="tableConfig"
      :tableData="tableData"
      :loading="tableLoading"
      :total="tableTotal"
      :pageSize="Number(pageSize)"
      :pageSizes="pageSizes"
      @currentChange="tableCurrentChange"
      @sortChange="tableSortChange"
      @sizeChange="tableSizeChange"
      @selectionChange="tableSelectionChange">
      <el-table-column
        label="操作"
        width="105">
        <template slot-scope="scope">
          <el-button  @click.native="getData(scope.row)"
            type="text" size="small"
            slot="reference"
            :loading="loadingBtn === '编辑' && loadingRow === scope.$index">编辑</el-button>
           <el-popover
            @hide="applyPopover = false"
            placement="left"
            title="选择审核状态"
            width="200"
            :disabled="applyPopover"
            trigger="click">
            <el-select v-model="apply"
              @change="applyChange"
              placeholder="请选择">
              <el-option
                v-for="item in applyList"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button  @click.native="applyOne(scope.row.uid, scope.$index)"
              type="text" size="small"
              slot="reference"
              :loading="loadingBtn === '审核' && loadingRow === scope.$index">审核</el-button>
           </el-popover>
        </template>
      </el-table-column>
    </comp-page-table>

    <!-- 添加，修改捎货题目弹窗
    -------------------------- -->
    <add-edit-person
      :showByToggle="showDialogByToggle"
      :editData="editData"
      @dialogComplete="getTableData"></add-edit-person>
  </div>
</template>

<script>
import AddEditPerson from './add-edit-person'
import { tableConfig, searchConfig } from './config'
import {
  listSearchMixin,
  listStatusMixin,
  listApplyMixin,
  listExportMixin
} from './mixins'

import { ShaohuoPersonService } from 'services/Api'
import {
  ConfirmTempMixin,
  btnLoadingMixin,
  dialogBeforeEditMixin,
  tableCoreMixin,
  tableStatusMixin,
  tableExportMixin
} from 'services/Public'
import { mapState } from 'vuex'

export default {
  name: 'PgShaohuoPersonList',
  components: { AddEditPerson },
  mixins: [
    ConfirmTempMixin,
    btnLoadingMixin,
    tableCoreMixin,
    tableStatusMixin,
    tableExportMixin,
    dialogBeforeEditMixin,
    listSearchMixin,
    listStatusMixin,
    listApplyMixin,
    listExportMixin
  ],
  data () {
    return {
      tableConfig,
      searchConfig
    }
  },
  computed: {
    ...mapState([ 'acc_id' ]),
    // 获取全部捎货人种类信息参数
    shaohuoListParam () {
      return {
        acc_id: this.acc_id,
        page: this.page,
        page_size: this.pageSize,
        sort_field: this.sort_field,
        sort_type: this.sort_type,
        search: this.search,
        ust_id: this.ustId,
        apply_status: this.applyStatus,
        exam_status: this.examStatus,
        status: this.shaohuoPersonStatus,
        start_time: this.startTime,
        end_time: this.endTime
      }
    }
  },
  methods: {
    // 捎货人列表
    preFetchTableData () {
      return ShaohuoPersonService.ShaohuoUserList(this.shaohuoListParam)
    },
    tableDataHandler (list) {
      list = list.map(item => {
        item.funcsName = item.funcs.map(i => i.func_name).join(',')
        return item
      })
      return list
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/views.scss";

@include b(shaohuo-person-list) {
  @include e(popover) {
    margin-left: 10px;
  }
  .el-button + span, span + .el-button {
    margin-left: 10px;
  }
}
</style>
